<template>
  <div>
    <hr />
    <div id="remarkItem">
      <div class="left">
        <div class="img">
          <img :src="avatar" alt />
        </div>
      </div>
      <div class="right">
        <div>
          <span class="username">{{username}}</span>
          <span>{{time | format}}</span>
        <span @click="backRecomment">回复</span>
        </div>
        <p><span>@{{username}}</span>{{content | formatContent}}</p>
      </div>
    </div>
    <transition name="fadeIn">
      <tip v-if="delRemarkShow" :text="textTip" @config="configDel" @cancel="cancelDel"></tip>
    </transition>
  </div>
</template>

<script>
import tip from "../../components/tips";
import { formatTime } from "../../formatTime";
export default {
  components:{
    tip
  },
  data() {
    return {
      showMsg: false,
      delRemarkShow: false,
      textTip: "你确定要删除吗",
      isShowColor: false,
      text: "删除成功",
      msgWay: "success",
      recommentGoodNum:this.goodNum
    }
  },
    filters: {
    format(val) {
      return formatTime(val);
    },
    formatContent(val) {
      return val.replace(/&gt;/g, ">").replace(/&lt;/g, "<");
    },
  },
  props:["content","goodNum","time","username","avatar","id"],
  methods: {
    showColor(){
      this.isShowColor=!this.isShowColor
      this.$axios.post("/recomment/update",{
        id:this.id,
        goodNum:this.goodNum+1
      }).then(res=>{        
        this.recommentGoodNum=this.recommentGoodNum+1
        
      })
    },
    backRecomment(){
      console.log(this.username);
      
      this.$emit("callUser",this.username)
    },
    showDel() {
      this.delRemarkShow = true;
    },
    configDel() {
      this.delRemark();
      this.delRemarkShow = false;
    },
    cancelDel() {
      this.delRemarkShow = false;
    },
    delRemark() {
      console.log(this.id);
      this.$axios
        .post("/recomment/del", {
          id: this.id,
          username: this.$store.getters.user.username,
        })
        .then((res) => {
          console.log(res);
          if (res.data.error === -1) {
            this.$emit("researchRecomment")
            this.$emit("delRecomment", "success");
          } else {
            this.$emit("delRecomment", "error");
          }
        });
    },
  },
}
</script>

<style lang="less" scoped>
@import url("../../css/comment/animate.css");
.showColor {
  color: #fb7299;
}

@media screen and (max-width:765px) {
  #remarkItem{
    display: flex;
    .left{
      text-align: center;
      .img{
          width: 40px;
          height: 40px;
          border-radius: 40px;
      }
      p {
      margin-top: 5px;
    }
    }
    .right{
      margin-left: 10px;
      div{
        .username{
          display: block;
        }
        span {
          font-size: 14px;
        margin: 0 10px;
        transition: all 0.4s;
        
        .icondianzan {
          color: #e5e5e5;
          &:active {
            color: #fb7299;
          }
        }
        i {
          margin-right: 5px;
          transition: all 0.4s;
        }
      }
      }
      p {
      margin-top: 10px;
      span{
        color: #e2e2e2;
      }
    }
    }
  }
}
@media screen and(min-width:765px) {
  #remarkItem {
  padding: 15px;
  display: flex;
  .left {
    text-align: center;
    .img {
      img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
      }
    }
    p {
      margin-top: 10px;
      transition: all 0.5s;
      &:hover {
        color: #e5e5e5;
      }
    }
  }
  .right {
    margin-left: 10px;
    div {
      span {
        margin: 0 15px;
        transition: all 0.4s;
        color: rgba(0, 0, 0, 0.4);
        font-size: 12px;
        &:nth-child(1){
          font-size: 16px;
          color: #333;
        }
        &:nth-child(3){
          &:hover{
            color: salmon;
          }
        }
      }
    }
    p {
      margin-top: 10px;
      margin-bottom: 10px;
      span{
        color: #e2e2e2;
      }
    }
  }
}
}
</style>